<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>设备信息总览</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-table thead span {
            /*background-color: #acd3ed;*/
            font-size: 15px;
        }

        .layui-table tbody tr td div {
            font-size: 14px;
        }

        .layui-table tbody tr:hover {
            background-color: #f7e8df;
        }

        .layui-table tbody tr:hover td div {
            font-size: 18px;
        }
    </style>
</head>
<body class="layui-anim layui-anim-scale flag" style="display: none"><br/>

<div class="x-nav">
            <span class="layui-breadcrumb">
                <a>首页</a>
                <a>设备信息总览</a>
                <a>设备序列号</a>

            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:5px;float:right"
       id="refresh" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid" style="margin-bottom: 30px;min-height: 740px">
    <!--        style="width: 90%;margin-left: auto;margin-right: auto;"-->
    <div class="layui-card" style="border-radius: 20px;">

        <div class="layui-card-body"
             style="background-image: linear-gradient(#f7e8df,#ffffff , #f7e8df);border-radius: 20px;">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                <legend class="layui-icon">设备序列号管理 &#xe705;&#xe705;&#xe705;</legend>
            </fieldset>
            <form class="layui-form layui-col-space5" action="" id="myForm">
                <div class="layui-input-inline">
                    <select lay-verify="choose" lay-filter="choose" name="option">
                        <option value="">选择要查找的内容</option>
                        <option value="1">设备ID</option>
                        <option value="2">设备类型</option>
                    </select>
                </div>
                <div class="layui-inline layui-show-xs-block">
                    <input style="display: none" lay-verify="" id="findText" type="text" name="message"
                           autocomplete="false" placeholder="" lay-reqText="" class="layui-input">
                </div>
                <div class="layui-inline layui-show-xs-block">
                    <button class="layui-btn" lay-submit="" lay-filter="search">
                        <i class="layui-icon">&#xe615;</i>查找
                    </button>
                </div>
            </form>
            <table id="demo" lay-filter="demo"></table>
        </div>
    </div>

</div>

<div class="x-nav" >
            <span class="layui-breadcrumb">
                <a>首页</a>
                <a>设备信息总览</a>
                <a>设备绑定情况总览</a>

            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:5px;float:right"
       onclick="location.reload()" id="fresh" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid" style="min-height: 770px;">
    <div class="layui-card" style="border-radius: 20px;">
        <div class="layui-card-body"
             style="border-radius: 20px;background-image: linear-gradient(#BED5FF,#ffffff , #BED5FF);">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                <legend class="layui-icon">设备绑定情况总览 &#xe857;&#xe857;&#xe857;</legend>
            </fieldset>
            <div class="layui-row layui-col-space15" style="margin-bottom: 10px">
                {foreach $dev as $device}
                <div class="layui-col-sm6 layui-col-md4 layui-col-lg4">
                    <div class="layui-card" style="border-color: #7886a1;border-style:solid;border-width:1px;">
                        <div class="layui-card-header" style="background-color: rgba(190,213,255,0.79)" ;>

                            <i style="font-size: 1.7em;font-family: 黑体">{$device.chinese}</i>

                            <i class="layui-icon">&#xe62c;&#xe62c;&#xe62c;</i>
                            <span class="layui-badge "
                                  style="background-color: #264c9a;border-radius: 5px">{$device.function}</span>
                        </div>
                        <div class="layui-card-body " style="background-color: rgba(190,213,255,0.79)">
                            <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog"
                                style="background-color: rgb(206,255,210);border-radius: 10px">

                                <li class="layui-table-grid layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg3"
                                    style="margin-top: 35px;">
                                    <div class="layui-fluid">
                                        <i class="layui-icon" style="font-size: 80px;">{$device.icon}</i>
                                    </div>
                                </li>

                                <li class="layui-col-xs7 layui-col-sm7 layui-col-md7 layui-col-lg8 "
                                    style="margin-left: 20px">
                                    <a class="x-admin-backlog-body"
                                       style="background-color: rgb(122,219,255);border-radius: 7px;height: 100px">
                                        <h3 style="color:#000000;font-size: 20px;font-weight:800;font-family: 幼圆;-webkit-text-stroke: 1px #000000;">
                                            设备总数量：</h3>
                                        <p>
                                            <br/>
                                            <cite style="font-size: 35px">{$device.all}</cite>
                                        </p>
                                    </a>

                                </li>

                            </ul>
                            <ul class="layui-row  layui-this  x-admin-backlog">
                                <a class="x-admin-backlog-body "
                                   style="background-color: rgb(248,212,233);margin-top:10px;border-radius: 27px;height: 80px">
                                    <h3 style="font-size: 1.7em;font-weight:800;font-family: 黑体;">异常设备数：</h3>
                                    <p style="margin-top: 10px">

                                        <cite style="color: #BD362F">{$device.error}</cite>
                                    </p>
                                </a>
                            </ul>
                        </div>
                    </div>
                </div>
                {/foreach}
            </div>
        </div>
    </div>
</div>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-icon layui-icon-delete  layui-btn-xs" value="{{d.serial_num}}"
       lay-event="del">
        删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-radius layui-btn-lg" lay-event="add">
            <i class="layui-icon"></i>设备ID入库
        </button>
    </div>
</script>
<script>



    layui.use(['table', 'form', 'layer', 'jquery',], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        $("#fresh").click(function () {
            setTimeout(() => window.scrollTo(0, 870), 10);
        });

        $("#refresh").click(function () {
            $("#myForm")[0].reset();
            layui.form.render();
            $("#findText").hide();
            parent.layui.notice.remove();
            parent.layui.notice.success("设备序列号列表已校准", "<div class = 'layui-icon layui-icon-heart-fill'> 同步成功</div>", parent.noticeOpt6);
            table.render({
                elem: '#demo'
                , url: '/index/Administrator/serialMsg' //数据接口
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , loading: true
                , size: 'lg'

                , page: {
                    layout: ['prev', 'page', 'next', 'count', 'limit']//自定义布局顺序

                    , groups: 10 	//最多几个跳页按钮
                    , first: false //不显示首页
                    , last: false //不显示尾页
                }
                , cols: [[ //表头,style: 'background-color: #bee4ca ; color: #2c2525 '   ,style: 'background-color: #acd3ed;color: #2c2525;' ,style: 'background-color: #bda9c5'
                    {
                        field: 'serial_num',
                        title: '设备ID',
                        minWidth: 100,
                        align: 'center'
                    }
                    , {
                        field: 'status', title: '绑定情况',
                        width: 90, align: 'center',
                        templet: function (d) {
                            if (d.status == '已绑定') {
                                return '<span style="color: #ab3635;font-family: 黑体;font-weight: bold;">' + d.status + '</span>'
                            } else {
                                return '<span style="color: #33912b;font-family: 黑体;font-weight: bold;">' + d.status + '</span>'
                            }
                        }
                    }
                    , {
                        field: 'type',
                        title: '设备类型',
                        align: 'left',
                        minWidth: 200
                    }
                    , {
                        field: 'operation',
                        title: '操作',
                        width: 90,
                        align: 'center',
                        toolbar: '#barDemo'
                    }
                ]]
            });
        });

        //动态显示
        parent.layui.notice.remove();
        parent.layui.notice.info('设备信息总览', '已进入', parent.noticeOpt1);
        setTimeout(function () {
            $('.flag').show();
            tableIns.resize();
        },20);


        //自定义验证规则
        form.verify({
            choose: function (value) {
                if (!value) {
                    parent.layui.notice.remove();
                    parent.layui.notice.error('请选择搜索项', '操作异常', parent.noticeOpt5);
                    return '请选择搜索项！'
                }
                // return '请选择搜索项！'
            },
            message: function (value) {
                if (!value) {
                    parent.layui.notice.remove();
                    parent.layui.notice.error('请输入要搜索的内容', '操作异常', parent.noticeOpt5);
                    return '请输入要搜索的内容';
                }

            }

        });

        // 动态显示搜索选项提示
        form.on('select(choose)', function (data) {
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            var findText = $("#findText");
            var select = data.value;
            //默认不显示输入框
            findText.hide();
            //重置验证类型
            findText.attr('lay-verify', '');
            //每次切换搜索项后都要清空里面的值
            findText.val('');
            // console.log(findText.val);
            switch (select) {
                case "1":
                    findText.attr('lay-verify', 'message');
                    findText.attr('placeholder', '请输入要搜索的设备ID');
                    // findText.attr('lay-reqText', '请输入要搜索的设备ID');
                    findText.show();
                    break;
                case "2":
                    findText.attr('lay-verify', 'message');
                    findText.attr('placeholder', '请输入要搜索的设备类型');
                    // findText.attr('lay-reqText', '请输入要搜索的设备类型');
                    findText.show();
                    break;
            }

        });

        //生成数据表格
        var tableIns = table.render({
            elem: '#demo'
            , url: '/index/Administrator/serialMsg' //数据接口
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , loading: true
            , size: 'lg'

            , page: {
                layout: ['prev', 'page', 'next', 'count', 'limit']//自定义布局顺序

                , groups: 10 	//最多几个跳页按钮
                , first: false //不显示首页
                , last: false //不显示尾页
            }
            , cols: [[ //表头,style: 'background-color: #bee4ca ; color: #2c2525 '   ,style: 'background-color: #acd3ed;color: #2c2525;' ,style: 'background-color: #bda9c5'
                {
                    field: 'serial_num',
                    title: '设备ID',
                    minWidth: 100,
                    align: 'center'
                }
                , {
                    field: 'status', title: '绑定情况',
                    width: 90, align: 'center',
                    templet: function (d) {
                        if (d.status == '已绑定') {
                            return '<span style="color: #ab3635;font-family: 黑体;font-weight: bold;">' + d.status + '</span>'
                        } else {
                            return '<span style="color: #33912b;font-family: 黑体;font-weight: bold;">' + d.status + '</span>'
                        }
                    }
                }
                , {
                    field: 'type',
                    title: '设备类型',
                    align: 'left',
                    minWidth: 200
                }
                , {
                    field: 'operation',
                    title: '操作',
                    width: 90,
                    align: 'center',
                    toolbar: '#barDemo'
                }
            ]]
            // ,done: function(res, curr, count){
            //     //如果是异步请求数据方式，res即为你接口返回的信息。
            //     //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            //     console.log(res.data);
            //
            //     //得到数据总量
            //     console.log(count);
            // }
        });

        //搜索功能
        form.on('submit(search)', function (data) {
            layer.msg('搜索中', {time: 500});
            // console.log(data.field.findTime);
            var load = layer.load();
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    choose: data.field.option
                    , message: data.field.message
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
                , done: function (res, curr, count) {
                    layer.close(load);
                    parent.layui.notice.remove();
                    if (count === 0) {
                        parent.layui.notice.success(res.msg, '搜索完成', parent.noticeOpt4);
                        layer.msg('搜索完成，' + res.msg, {time: 1500});
                    } else {
                        parent.layui.notice.success('找到' + count + '条数据', '搜索完成', parent.noticeOpt4);
                        layer.msg('搜索完成，找到' + count + '条数据', {time: 1500});
                    }

                }
            });

            return false;
        });

        table.on('toolbar(demo)', function (obj) {
            if (obj.event === 'add') {
                parent.layui.notice.remove();
                parent.layui.notice.warning('正在添加新的设备ID', '操作提示', parent.noticeOpt3);
                xadmin.open('设备ID入库', '/index/tools/device_id_add_page', 380, 390, window.screen.width);
            }
        });

        //删除设备ID
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            var flag = false;
            parent.layui.notice.remove();
            parent.layui.notice.warning('正在删除ID为：' + data.serial_num + ' 的' + data.type + '设备：', '操作提示', parent.noticeOpt3);
            if (obj.event === 'del') {
                layer.confirm('真的要删除序列号为 ' + data.serial_num + ' 的' + data.type + '设备吗？'
                    , {
                        icon: 3,
                        title: '提示',
                        closeBtn: 0,
                    }
                    , function (index) {
                        if (data.status === '已绑定') {
                            layer.confirm('检测到该设备ID已被绑定，删除该设备ID会同时解除绑定并删除所有该设备ID产生的数据信息，请再次确认操作！'
                                , {
                                    icon: 7
                                    , btn: ['心意已决', '算了吧']
                                    , btn1: function (index1) {
                                        flag = true;
                                        console.log(flag);
                                        layer.msg('删除中……', {time: 800});
                                        var load = layer.load();
                                        $.ajax({
                                            type: "POST",
                                            url: "/index/Administrator/delDevID",
                                            data: {
                                                type: data.type,
                                                serial_num: data.serial_num,
                                                flag: flag,
                                            },
                                            success: function (msg) {
                                                layer.close(load);
                                                parent.layui.notice.remove();
                                                layer.close(index1);
                                                if (msg === 'ok') {
                                                    parent.layui.notice.success('成功删除序列号为：' + data.serial_num + '的设备及其产生的数据', '操作完成', parent.noticeOpt4);
                                                    layer.msg('成功删除序列号为：' + data.serial_num + '的设备及其产生的数据', {
                                                        time: 1400,
                                                        icon: 1
                                                    });
                                                    setTimeout(function () {
                                                        $("#refresh").click();
                                                    }, 1200);

                                                } else {
                                                    parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
                                                    layer.msg(msg, {time: 1000});
                                                }

                                            },
                                            error: function () {
                                                layer.close(load);
                                                parent.layui.notice.remove();
                                                parent.layui.notice.error('数据传输失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
                                                layer.alert('数据传输失败，请联系后台管理员！', {icon: 2})
                                            }
                                        });
                                    }
                                    , btn2: function (index1) {
                                        layer.msg('您取消了操作', {time: 800});
                                        layer.close(index1);
                                    }
                                }
                            )
                        } else {
                            //删除未绑定的设备ID
                            // console.log(data.serial_num + flag);
                            layer.msg('删除中……', {time: 800});
                            var load = layer.load();
                            $.ajax({
                                type: "POST",
                                url: "/index/Administrator/delDevID",
                                data: {
                                    type: data.type,
                                    serial_num: data.serial_num,
                                    flag: flag,
                                },
                                success: function (msg) {
                                    layer.close(load);
                                    parent.layui.notice.remove();
                                    if (msg == 'ok') {
                                        parent.layui.notice.success('成功删除序列号为：' + data.serial_num + ' 的设备', '操作完成', parent.noticeOpt4);
                                        layer.msg('成功删除序列号为：' + data.serial_num + ' 的设备', {time: 1800, icon: 1});
                                        setTimeout(function () {
                                            $("#refresh").click();
                                        }, 1400);

                                    } else {
                                        parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
                                        layer.msg(msg, {time: 1200});
                                    }

                                },
                                error: function () {
                                    layer.close(load);
                                    parent.layui.notice.remove();
                                    parent.layui.notice.error('数据传输失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
                                    layer.alert('数据传输失败，请联系后台管理员！', {icon: 2})
                                }
                            });
                        }

                        layer.close(index);
                    }
                    , function (index) {
                        layer.msg('您取消了操作', {time: 800});
                        layer.close(index);
                    }
                );
            }
        });


    });


</script>

</body>
</html>